Without clear

div1
div2 - Notice that div2 is after div1 in the HTML code. However, since div2 has no clear, the text in div2 floats around div1.

With clear: left

div3
div4 - Here, clear: left; pushes div4 down below the floating div3, on its left side.

Without Clearfix

The image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:

Pineapple Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...

Using the Clearfix Hack

Add the clearfix hack to the containing element, to fix this problem:

Pineapple Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...